import React from 'react'
import Swiper from 'react-native-swiper';
import { StyleSheet, Text, View, Image, ImageBackground, FlatList, TouchableOpacity, Button, TextInput } from 'react-native';
import '../global.js'
const Enter = ({ navigation }) => {
    return (
        <View style={{ height: '100%', width: '100%' }}>
            <Swiper
                style={styles.wrapper}
                showsButtons={false}
                loop={false}
                autoplay={true}
                autoplayTime={3}
                paginationStyle={{ top: height(800),right:'10%'}}
                dot={<View style={{    //选中的圆点样式
                    marginLeft: 40,
                    backgroundColor:'rgba(255,255,255,0.3)',
                    width:10,
                    height:10,
                    borderRadius:5
                }}/>}
                activeDot={<View style={{    //选中的圆点样式
                    marginLeft: 40,
                    backgroundColor:'white',
                    width:10,
                    height:10,
                    borderRadius:5
                }}/>}
            >
                <View style={styles.slide}>
                    <ImageBackground source={require('../images/启动页1.png')} style={styles.imgbg}></ImageBackground>
                </View>
                <View style={styles.slide}>
                    <ImageBackground source={require('../images/启动页2.png')} style={styles.imgbg}></ImageBackground>
                </View>
                <View style={styles.slide}>
                    <ImageBackground source={require('../images/启动页3.jpg')} style={styles.imgbg}>
                        <TouchableOpacity
                            style={styles.btn}
                            onPress={() => {
                                navigation.navigate('Root');
                            }}>
                            <Text style={styles.text}>立即体验</Text>
                        </TouchableOpacity>

                    </ImageBackground>
                </View>
            </Swiper>
        </View>

    )
}
const styles = StyleSheet.create({
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    imgbg: {
        width: '100%',
        height: '100%'
    },
    btn: {
        backgroundColor: 'rgba(255,255,255,0.3)',
        alignSelf: 'center',
        borderRadius: height(36),
        width: width(300),
        height: height(75),
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        top: height(1050)
    },
    text: {
        color: 'white',
        fontSize: 20,
        textAlign: 'center',
        textAlignVertical: 'center'
    }
})
export default Enter